<template>
  <div style="min-height:50px;">
    <el-form size="small" :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" :inline="true"
      class="demo-form-inline selectinput">
      <!-- 默认展示的分类  -->
      <label>{{sname}}</label>
      <el-form-item v-for="(domain, index) in selectListObj.domains" :key="domain.key" :prop="'domains.' + index + '.value'">

        <el-input style="width:auto;" v-model="domain.value" readonly class="textbtn"></el-input>
        <i class="el-icon-close" @click.prevent="removeDomain(domain)"></i>
      </el-form-item>
      <!-- 增加选择下来框 -->
      <el-form-item  v-for="(domainsel, index) in selectListObj.selectList" :key="domainsel.key" :prop="'selectList.' + index + '.value'">
        <el-select v-model="domainsel.value" @change="addMenu($event,domainsel)" placeholder="请选择">
          <el-option v-for="(item,index) in options" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <i class="el-icon-close" @click.prevent="SelectRemoveDomain(domainsel)"></i>
      </el-form-item>
      <!-- 增加按钮 -->
      <el-button size="small" @click="SelectAddDomain"><i class="el-icon-plus"></i></el-button>

    </el-form>
  </div>
</template>

<script>
  export default {
    props: {
      sname:{
        type:String
      },
      options: {
        type: Array
      },
      dynamicValidateForm: {
        type: Object
      }
    },
    data() {
      return {
        clickstatus: true,
        idArr:[],
        selectListObj:{
          domains: [{
            value: '暂无',
            id:'0'
          }],
          selectList: [{
            value: '暂无下拉 ',
            id: '0'
          }]
        } 
      }
    },
    watch:{
      dynamicValidateForm: {
        handler(newValue, oldValue) {
          // console.log(newValue,'121212');
          this.selectListObj.domains = newValue.domains;
          this.selectListObj.selectList = newValue.selectList;
          // this.selectListObj.domains.splice(0, 1);
          this.selectListObj.selectList.splice(0, 1);

　　　　},
// 　　　　deep: true

      }
    },
    created() {
      this.selectListObj.selectList.splice(0, 1) //默认删除第一个显示的菜单
      // this.selectListObj.domains.splice(0, 1);
      
    },

    updated() {
      
      //设置添加按钮宽度
      $('.selectinput').find('.textbtn input').each(function(){
        var length = $(this).val().length;
        $(this).css('width',length*15+40);
      });
      
      // this.dynamicValidateForm.selectList.length = 0;
    },
    mounted() {
      if(!this.selectListObj.domains.value){
          this.selectListObj.domains.splice(0, 1);
      }
      
      $('.selectinput').find('.textbtn input').each(function(){
        var length = $(this).val().length;
        $(this).css('width',length*15+40);
      });
      
      
    },
    methods: {
      getContent() { // 获取内容方法
        var newArr =[];
        for(var i =0;i<this.selectListObj.domains.length;i++){
          newArr.push(this.selectListObj.domains[i].id);
        }
        return newArr;
      },
      SelectRemoveDomain(item) {//下拉菜单删除事件
        var index = this.selectListObj.selectList.indexOf(item)
        if (index !== -1) {
          this.selectListObj.selectList.splice(index, 1)
        }
        this.clickstatus = true;
      },
      SelectAddDomain() {//下拉菜单添加事件
        this.idArr.length=0;
        if (this.clickstatus) {
          this.selectListObj.selectList.push({
            value: '',
            key: Date.now()
          });
          this.clickstatus = false;
        } else {
          this.$message({
            message: '只能添加一个选择框',
            type: 'warning'
          });
          
        }
        for(var i = 0;i<this.selectListObj.domains.length;i++){
          this.idArr.push(this.selectListObj.domains[i].id);
        }
        
        this.$emit("changename",this.idArr.map(Number))
      },
      removeDomain(item) {//菜单删除
        this.idArr.length=0;
        var index = this.selectListObj.domains.indexOf(item)
        if (index !== -1) {
          this.selectListObj.domains.splice(index, 1)
        }
        this.clickstatus = true;

        for(var i = 0;i<this.selectListObj.domains.length;i++){
          this.idArr.push(this.selectListObj.domains[i].id);
        }
        this.selectListObj.selectList.splice(0, 1);//清空下拉菜单
        
        this.$emit("changename",this.idArr.map(Number))
      },
      addDomain(val, id) {
        
        this.idArr.length=0
        if(this.selectListObj.domains.filter(item => item.id==id ).length == 0){
          this.selectListObj.domains.push({
            value: val,
            id: id
          });
        }else{
          this.$message.error('不能选择相同选项');
        }
        
        for(var i = 0;i<this.selectListObj.domains.length;i++){      
          this.idArr.push(this.selectListObj.domains[i].id);
        }
        
        //  var x = new Set(this.idArr);
        //  var newArr = [...x];
        
          
        
        this.$emit("changename",this.idArr.map(Number))
      },
      //下拉菜单选择事件
      addMenu(event, id) {
  
        //根据获取的val值查找对应的对象
        var data = this.options.filter(function (item) {
          return item.value == event;
        })

        //下拉菜单单击以后，在zuo侧添加按钮
        this.addDomain(data[0].label, data[0].value);
        this.selectListObj.selectList.splice(0, 1)
        this.clickstatus = true; //开启下拉菜单添加权限

        setTimeout(function () {
          $('.selectinput').find('.textbtn input').each(function () {
            var length = $(this).val().length;
            $(this).css('width', length * 15 + 40);
          });
          
        }, 500);
      },
    },
    beforeDestroy() {
      this.selectListObj.selectList.length=0;
      this.selectListObj.domains.length=0;
        
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .el-form--inline.selectinput .el-form-item {
    position: relative;
  }

  .el-form--inline.selectinput .el-form-item:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #f00 transparent transparent;
    position: absolute;
    right: 0;
    top: 1px;
    z-index: 1;
  }

  .el-form--inline.selectinput {
    padding-left: 20px;
  }

  .el-form--inline.selectinput .el-form-item .el-input__inner {
    text-align: center;
  }

  .el-form--inline.selectinput .el-form-item .el-icon-close {
    position: absolute;
    right: 0;
    top: 1px;
    color: #FFF;
    font-size: 12px;
    text-align: center;
    z-index: 2;
  }

  label {
    display: inline-block;
    text-align: right;
    padding: 0 8px 0 0;
    font-size:14px;
    width:138px;
  }

</style>
